<template>
  <div>
    <h3>柱状图和饼图BarAndPieTest</h3>

    <div class="box" ref="box"></div>
    <div class="box2" ref="box2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: {},
      num: 1,
      chartsDataList: [],
      timer: null,
      index: 0,
      tableData: [],
      tableDataList: [],
      timeLong: "",
      startTime: "",
      endTime: "",
    };
  },
  mounted() {
    let me = this;
    setTimeout(() => {
      me.init();
      me.init2();
      this.$bus.on("resize", (val) => {
        this.myChart.resize ? this.myChart.resize() : "";
      });
    }, 120);
  },
  methods: {
    getTimeVal(val) {
      let time = "";
      let me = this;
      let hour = me.$moment.utc(val).hour();
      let minute = me.$moment.utc(val).minute();
      let second = me.$moment.utc(val).second();
      let millisecond = me.$moment.utc(val).millisecond();

      hour ? (time += hour + "小时") : "";
      minute ? (time += minute + "分") : "";
      if (second && millisecond) {
        time += second + "." + millisecond + "秒";
      } else if (second && !millisecond) {
        second ? (time += second + "秒") : "";
      } else if (!second && millisecond) {
        time += "0." + millisecond + "秒";
      } else {
        time = val;
      }

      return time;
    },
    init() {
      let me = this;

      let box = this.$refs.box;
      let myChart = this.$echarts.init(box);
      let option = {
        color: ["#2D79E9", "#67C23A", "#7FAE90"],
        tooltip: [
          {
            trigger: "axis",
            showContent: true,
            axisPointer: {
              type: "shadow",
            },
            textStyle: { width: 700 },

            formatter: function (params) {
              if (params && params.length > 0) {
                let str = "任务名称XXXXXX" + "</br>";
                for (var i = 0; i < params.length; i++) {
                  let tar = params[i];
                  let name = tar.seriesName;
                  let newName = tar.data.name;
                  let marker = tar.marker;
                  let value = tar.value;

                  if (newName) name = newName + " " + tar.seriesName;
                  if (name) {
                    str +=
                      "<div style='display:flex;justify-content:space-between'><span>" +
                      marker +
                      name +
                      " : </span>" +
                      "<span>" +
                      value +
                      "毫秒</span>" +
                      "</div>";
                  }
                }
                return str;
              }
            },
          },
        ],
        title: {
          text: "任务名称XXXX",
          textStyle: { fontSize: 22 },
          subtext: "总耗时：" + me.getTimeVal(me.timeLong),
          subtextStyle: { fontSize: 16, color: "#999999" },
          x: "center",
        },
        legend: {
          // show: true,
          // top: 60,
        },
        grid: [
          {
            // top: 85,
            width: "90%",
            // height: 140,
            // bottom: "75%",
            left: 60,
            // containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            // boundaryGap: [0, 0.01],
            name: "单位：毫秒",
            show: false,
          },
        ],
        yAxis: [
          {
            type: "category",
            data: ["任务耗时", "步骤1", "步骤2"],
            // nameGap: 30,
            // offset: 20,
            // barGap: "0%",
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
            },
            axisLabel: {
              // show: false, //不显示坐标轴上的文字
            },
            splitLine: {
              //网格线
              show: false,
            },
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.01],
          name: "单位：毫秒",
          show: false,
        },
        yAxis: {
          axisTick: {
            show: false, //不显示坐标轴刻度线
          },
          axisLine: {
            show: false, //不显示坐标轴线
          },
          axisLabel: {
            // show: false, //不显示坐标轴上的文字
          },
          splitLine: {
            //网格线
            show: false,
          },
          type: "category",
          data: ["任务耗时", "步骤1", "步骤2"],
        },
        selectedMode: "single",
        series: [
          {
            name: "任务总耗时",
            type: "bar",
            stack: "Total",
            // barGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            // barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            barWidth: "60%",
            emphasis: {
              // focus: "series",
            },
            color: "#73C0DE",
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);
                if (value && value != "0") {
                  return time;
                } else {
                  return "";
                }
                // return value + "毫秒";
                // return time;
              },
              position: "right",
              show: true,
            },
            data: [6000, 0, 0],
          },
          {
            name: "实际提交时间",
            type: "bar",
            stack: "total",
            // barGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            // barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            barWidth: "60%",
            emphasis: {
              // focus: "series",
            },
            color: "#2D79E9",
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);
                // return value + "毫秒";
                if (value && value != "0") {
                  return time;
                } else {
                  return "";
                }
              },
              // position: "right",
              // show: true,
            },
            data: [0, 4001, 0],
          },
          {
            name: "步骤运行时间",
            type: "bar",
            stack: "total",

            emphasis: {
              // focus: "series",
            },
            // barGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            // barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            barWidth: "60%",
            color: "#2D79E9",
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);

                // return value + "毫秒";
                return time;
              },
              // position: "right",
              // show: true,
            },
            data: [0, 4001, 0],
          },
        ],
      };

      myChart.setOption(option, true);
      this.myChart = myChart;
    },
    init2() {
      let me = this;

      let box = this.$refs.box2;
      let myChart = this.$echarts.init(box);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        series: [
          {
            name: "Direct",
            color: "#777",
            type: "bar",
            stack: "total",
            barWidth: "100%",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "Mail Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Affiliate Ad",
            barGap: "0%",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 212, 201, 154, 190, 330, 410],
          },
          {
            name: "Search Engine",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 300px;
}
.box2 {
  width: 100%;
  height: 200px;
}
.topBtn {
  display: flex;
  justify-content: center;
}
.bl {
  display: flex;
  justify-content: space-between;
}
.flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
